<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>用户管理</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">用户管理！</h1>
        <p class="lead">管理系统当前的用户信息，包括用户信息的增删改查等操作。</p>
        <hr class="my-4">
        <div class="row">
            <div class="btn-group col-6 mb-3" role="group" aria-label="example">
                <button type="button" class="btn btn-outline-success">
                    <span class="oi oi-plus"></span> 新增
                </button>
                <button type="button" class="btn btn-outline-warning">
                    <span class="oi oi-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-outline-danger">
                    <span class="oi oi-minus"></span> 删除
                </button>
            </div>
            <div class="input-group col-6 mb-3">
                <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon">
                <div class="input-group-append">
                    <button class="btn btn-outline-success" type="button">
                        <span class="oi oi-magnifying-glass"></span>
                    </button>
                    <button type="button" class="btn btn-outline-success">
                        <span class="oi oi-reload"></span>
                    </button>
                    <button class="btn btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="oi oi-list"></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">JSON</a>
                        <a class="dropdown-item" href="#">XML</a>
                        <a class="dropdown-item" href="#">CSV</a>
                        <a class="dropdown-item" href="#">TXT</a>
                        <a class="dropdown-item" href="#">MS-Excel</a>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <th scope="col">用户名</th>
                <th scope="col">密码</th>
                <th scope="col">邮箱</th>
                <th scope="col">联系方式</th>
                <th scope="col">注册时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>